<template>
  <div class="login_view">
    <div class="login_group_view">
      <div class="title">{{ pageTitle }}</div>
      <el-input class="login_input" v-model="username" placeholder="请输入账号" maxLength="16" clearable prefix-icon="el-icon-user"></el-input>
      <el-input class="login_input" v-model="password" show-password placeholder="请输入密码" maxLength="16" clearable prefix-icon="el-icon-lock"></el-input>
      <el-input v-if="pageMode == 'register'" class="login_input" v-model="checkPassword" show-password placeholder="请再次输入密码确认" maxLength="16" clearable prefix-icon="el-icon-lock"></el-input>
      <el-input v-if="pageMode == 'register'" class="login_input" v-model="mobile" placeholder="手机号" maxLength="11" clearable prefix-icon="el-icon-mobile-phone"></el-input>
      <div class="security_code">
        <el-input class="code_input" v-model="securityCode" placeholder="验证码" maxLength="4" clearable prefix-icon="el-icon-warning-outline" :disabled="!codeImgUrl"></el-input>
        <img v-if="codeImgUrl" :src="codeImgUrl" alt="" class="code_image" @click="getCode">
        <el-button v-else @click="getCode" class="code_btn">获取验证码</el-button>
      </div>
      <template v-if="pageMode == 'register'">
        <el-button class="login_btn" type="primary" @click="register" @keydown="register">注册</el-button>
        <div class="register" @click="changeLogin">返回登录</div>
      </template>
      <template v-else>
        <el-button class="login_btn" type="primary" @click="login" @keydown="login">登录</el-button>
        <div class="register" @click="changeRegister">注册新用户</div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getSecurityCode, postRegister, postLogin } from '@/api/common'
import ls from '@/lib/script/storage'
import { ElMessage } from 'element-plus';
export default defineComponent({
  setup(){
    const router = useRouter()

    let pageTitle = ref("欢迎登录监控系统后台") // 页面标题
    let username = ref(""); // 账号
    let password = ref(""); // 密码
    let checkPassword = ref(""); // 确认密码
    let mobile = ref(""); // 手机号
    let securityCode = ref(""); // 验证码
    let codeImgUrl = ref(""); // 验证码图片路径
    let captchaId = ref(""); // 验证码id
    let loading = false; // 验证码loading
    let pageMode = ref('login');

    // 登录
    const login = _ => {
      // 检查信息
      if(!checkInfo('login')){
        return false;
      }
      let args = {
        account: username.value,
        password: password.value,
        captchaId: captchaId.value,
        code: securityCode.value,
      }
      postLogin(args).then(resp => {
        let {code, data, message} = resp;
        if(code === 0){
          // 写入用户信息
          let {token, refreshToen, user} = data;
          ls.setItem('monitoring_background_metadata', data)

          router.push({name: 'home'})
        } else {
          codeImgUrl.value = ''
          securityCode.value = ''
          captchaId.value = ''
          ElMessage.error({message: `code ${code}; ${message}`})
        }
      })
    }
    // 获取验证码
    const getCode = _ => {
      if(loading) {
        ElMessage .warning({
          type: 'warning',
          message: '验证码获取间隔为1秒, 您先消停消停'
        })
        return
      };
      loading = true;
      setTimeout(() => {
        loading = false;
      }, 1000);
      getSecurityCode({}).then(resp => {
        console.log('resp', resp);
        let {code, data} = resp;
        if(code === 0){
          codeImgUrl.value = data.base64
          captchaId.value = data.captchaId
        }
      })
    }
    // 切换至登录模式
    const changeLogin = _ => {
      pageMode.value = 'login'
      pageTitle.value = "欢迎登录监控系统后台"
      username.value = ''
      password.value = ''
      checkPassword.value = ''
      securityCode.value = ''
      codeImgUrl.value = ''
      captchaId.value = ''
    }
    // 切换至注册模式
    const changeRegister = _ => {
      pageMode.value = 'register'
      pageTitle.value = "新用户注册"
      username.value = ''
      password.value = ''
      checkPassword.value = ''
      securityCode.value = ''
      codeImgUrl.value = ''
      captchaId.value = ''
    }
    // 检查登录/注册信息是否齐全
    const checkInfo = mode => {
      if(!username.value){
        ElMessage.error({message: '请输入账号'})
        return false;
      }
      if(!password.value || (mode == 'register' && !checkPassword.value)){
        ElMessage.error({message: '请输入密码'})
        return false;
      }
      // 注册
      if(mode == 'register'){
        if(password.value.length < 6 || checkPassword.value.length < 6){
          ElMessage.error({message: '密码长度不得少于6位'})
          return false;
        }
        if(password.value !== checkPassword.value) {
          ElMessage.error({message: '两次密码不一致, 请重新确认输入'})
          return false;
        }
        if(!mobile.value){
          ElMessage.error({message: '请输入手机号'})
          return false;
        }
      }
      if(!securityCode.value){
        ElMessage.error({message: '请输入验证码'})
        return false;
      }
      return true;
    }
    // 注册
    const register = _ => {
      // 检查信息
      if(!checkInfo('register')){
        return false;
      }

      let args = {
        account: username.value,
        password: password.value,
        mobile: mobile.value,
        captchaId: captchaId.value,
        code: securityCode.value,
      }
      postRegister(args).then(resp => {
        console.log('postRegister', resp);
        let {code, data, message} = resp;
        if(code === 0){
          ElMessage.success({message: '注册成功！2秒后返回登录'})
          setTimeout(() => {
            pageMode.value = 'login'
            pageTitle.value = "欢迎登录监控系统后台"
            // username.value = ''
            // password.value = ''
            checkPassword.value = ''
            securityCode.value = ''
            codeImgUrl.value = ''
            captchaId.value = ''
          }, 1900);
        } else {
          codeImgUrl.value = ''
          securityCode.value = ''
          captchaId.value = ''
          ElMessage.error({message: `code ${code}; ${message}`})
        }
      })
    }

    return reactive({
      pageTitle,
      username,
      password,
      checkPassword,
      mobile,
      securityCode,
      codeImgUrl,
      pageMode,

      login,
      getCode,
      changeLogin,
      changeRegister,
      register,
    })
  }
})
</script>

<style lang='less' scoped>
.login_view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // background-color: skyblue;
  // background: #2980B9;  /* fallback for old browsers */
  // background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
  // background: linear-gradient(45deg, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  // background: #67c5c4;  /* fallback for old browsers */
  // background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #67c5c4);  /* Chrome 10-25, Safari 5.1-6 */
  // background: linear-gradient(45deg, #FFFFFF, #6DD5FA, #67c5c4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: url(http://51hlk.com/img/bg2.jpg) no-repeat 60% top / cover; 

  .login_group_view {
    width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-20px);
    padding: 40px;
    border-radius: 11px;
    box-shadow: 0 0 13px 0 rgb(0 0 0 / 15%);
    background-color: rgba(255, 255, 255, .6);
    transition: 0.5s all;
    transform-origin: center;
    filter: 10px;
    .title {
      height: 30px;
      line-height: 30px;
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 36px;
    }
    .login_input, .security_code{
      margin-bottom: 20px;
    }
    .login_btn {
      width: 100%;
      margin-bottom: 10px;
    }
    .security_code {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .code_input {
        width: 170px;
      }
      
      .code_image, .code_btn {
        width: 120px;
        height: 32px;
        border-radius: 3px;
      }
    }
  }
}
</style>